<template>
	<el-collapse v-model="activeNames">
		<el-collapse-item name="1">
			<template slot="title">
				<el-divider content-position="left">
					<view class="bold-text user-select-none">cc.Label</view>
				</el-divider>
			</template>

			<!-- enabled -->
			<el-row>
				<el-col :span="spacing">
					<el-tooltip content="是否启用" placement="top" effect="light">
						<text class="">Enabled</text>
					</el-tooltip>
				</el-col>
				<el-col :span="24-spacing">
					<el-checkbox v-model="labelData.enabled" @change="handleChangeEnabled">启用</el-checkbox>
				</el-col>
			</el-row>

			<!-- string -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">String</el-col>
				<el-col :span="24-spacing">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
						@change="handleChangeString" v-model="labelData.string">
					</el-input>
				</el-col>
			</el-row>
			<!-- horizontalAlign -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">HorizontalAlign</el-col>
				<el-col :span="24-spacing">
					<el-select v-model="labelData.horizontalAlign" placeholder="请选择" size="mini"
						@change="handleChangeHorizontalAlign">
						<el-option v-for="item in horizontalAlignOptions" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>

			<!-- verticalAlign -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">VerticalAlign</el-col>
				<el-col :span="24-spacing">
					<el-select v-model="labelData.verticalAlign" placeholder="请选择" size="mini"
						@change="handleChangeVerticalAlign">
						<el-option v-for="item in verticalAlignOptions" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			
			<!-- fontSize -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">
					<el-tooltip content="文字尺寸,以point为单位" placement="top" effect="light">
						<text class="">fontSize</text>
					</el-tooltip>
				</el-col>
				<el-col :span="24-spacing" class="ui-container">
					<el-input-number size="mini" v-model="labelData.fontSize" controls-position="right"
						@change="handleChangefontSize"></el-input-number>
				</el-col>
			</el-row>
			
			<!-- lineHeight -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">
					<el-tooltip content="行高" placement="top" effect="light">
						<text class="">lineHeight</text>
					</el-tooltip>
				</el-col>
				<el-col :span="24-spacing" class="ui-container">
					<el-input-number size="mini" v-model="labelData.lineHeight" controls-position="right"
						@change="handleChangelineHeight"></el-input-number>
				</el-col>
			</el-row>

		</el-collapse-item>
	</el-collapse>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "ui-label",
		props: [
			'labelData',
		],
		computed: {
			...mapState({
				uuid: state => state.app.uuid,
			})
		},
		data() {
			return {
				activeNames: ['1'],
				spacing: 4,
				horizontalAlignOptions: [{
					value: 0,
					label: 'LEFT'
				}, {
					value: 1,
					label: 'CENTER'
				}, {
					value: 2,
					label: 'RIGHT'
				}],
				verticalAlignOptions: [{
					value: 0,
					label: 'Top'
				}, {
					value: 1,
					label: 'CENTER'
				}, {
					value: 2,
					label: 'BOTTOM'
				}],
			};
		},
		methods: {
			handleChangeVerticalAlign(value) {
				this.pluginSetNodeLabelData('verticalAlign', value, true);
			},
			handleChangeEnabled(value) {
				this.pluginSetNodeLabelData('enabled', value);
			},
			handleChangeString(value) {
				this.pluginSetNodeLabelData('string', value);
			},
			handleChangeHorizontalAlign(value) {
				this.pluginSetNodeLabelData('horizontalAlign', value, true);
			},
			handleChangefontSize(value) {
				this.pluginSetNodeLabelData('fontSize', value, true);
			},
			handleChangelineHeight(value) {
				this.pluginSetNodeLabelData('lineHeight', value, true);
			},
			pluginSetNodeLabelData(key, value, isNumber) {
				/**
				 * 设置Label  值，方向,
				 * @param uuid 唯一标识
				 * @param key key值
				 * @param value 值
				 * @param isNumber 是否数字类型
				 */
				this._evalCode(
					"window.pluginSetNodeLabelData(" +
					"'" + this.uuid + "'," +
					"'" + key + "'," +
					"'" + value + "'," +
					"'" + isNumber + "'" +
					")");
				this._freshNode();
			},
		}
	}
</script>

<style>
	.el-collapse {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		overflow: hidden;
		color: #303133;
		-webkit-transition: .3s;
		transition: .3s;
		border-top: none;
		border-bottom: none;
		padding: 0px 15px;
		margin-top: 10px;
	}
</style>